You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
5:04Drawing Tools Overview
-
1:57Drawing a Line
-
1:42Fill and Stroke
-
2:16Gradients
-
4:05Eyedropper Tool
-
4:54Shape Geometry
-
3:09Editing Shape Paths
-
2:54Bezier Curves
Take Topic Challenge
LESSON
Drawing Tools Overview
Description
Shapes or graphics such as lines, rectangles, and circles can be created using the 2D drawing tools in Ignition. All SVG (Scalable Vector Graphics) images are importable in Ignition.
Video recorded using: Ignition 8.1
Resources
Transcript
(open in window)[00:00] In this lesson, we'll give a quick introduction to the set of drawing tools available in the Vision Designer These tools allow users to draw their own vector graphics on a window. They're available in a toolbar on the right hand side of the Designer The selection tool is the top most one on the toolbar, and it's active by default until another tool is selected. It allows us to select and manipulate specific components on a window. For example, we can select this label, or the filled rectangle behind it, and move or resize these components as we wish, as well as configure their properties in the Property Editor. The group of tools below the selection tool are the ones which actually draw graphics. The next one is the rectangle tool. Once this tool is selected, we can draw one or more rectangles. By dragging one of the square handles, we can resize those rectangles. By dragging the circle handle at the top right, we can round the corners as desired, and by holding down control, then dragging, we can draw squares.
[01:17] Also note that while any one of the tools is still selected, if we want to select or manipulate one or more shapes, we first need to go back and reselect the selection tool. For example, now we can go back and select all the components and clear them off of our window. Next is the circle tool. Once selected, this tool lets us draw one or more ellipses, which we can then resize by dragging one of the handles. And by holding down control and then drawing, we can draw circles. And once again, we will reselect the selection tool first to be able to delete all of the components. Next is the polygon tool, which when selected allows us to draw any kind of polygon we wish. Up in the toolbar are a couple of default settings we can change.
[02:12] The default is three corners, but we can increase that by using the dropdown. We can also transform it into a starlike shape, then click and drag one of these inner vertex handles to reconfigure the shape as desired. And once again, we'll select the selection tool first to select any components and delete them from our workspace. Next is the arrow tool, which allows us to draw one or more arrows. Up in the toolbar is a setting to make the arrows single or double-sided. So we can make one of these arrows double-sided, and by dragging the appropriate handle, we can adjust the overall arrow length, the thickness of the arrow body, and the width of the arrowhead alone. And once again, we will reselect the selection tool first to be able to clear our workspace of all components.
[03:15] The next drawing tool is the pencil tool. This is used to draw any freehand graphic shape using our mouse alone. So we can draw some random curved line here, or connect it into a closed shape that we can work with. And up in the toolbar, there are some settings for how we can simplify or smooth out our graphic. The final drawing tool is the line tool, which allows us to draw straight lines, perpendicular lines, or curved lines, based on which drawing mode is selected. For example, let's select straight line segments. Then we simply click a series of points to define the line's path or even make it a closed shape.
[04:08] Or if we select perpendicular line segments, we can draw strictly horizontal and vertical perpendicular lines. There is also an option for curved line segments, which will be covered in a coming lesson. Finally, following the primary shape or line drawing tools, there are three more options to modify existing shapes: the path tool, which adds handles and tangent lines, so we can modify an existing shape; the gradient tool, which lets us manipulate the color gradient of some existing shape; and the eyedropper tool, which lets us transfer fill and stroke colors between existing components. These three will each be covered in more detail in coming lessons. So with the drawing tools, there are multiple ways to create any needed shapes, lines, or curves for your project.